<template>
    <h3>组件生命周期</h3>
    <p ref="name">{{msg}}</p>
    <button @click="updatemsg">按钮</button>
    <ul>
        <li v-for="(item,index) in names" :key="index">
            <h3>{{item.title}}</h3>
            <h3>{{item.content}}</h3>
        </li>
    </ul>
</template>
<script>
export default{
    beforeCreate(){
        console.log('组件创建之前');

    },
    created(){
        console.log('组件创建之后');
        
    },
    beforeMount(){
        console.log('组件挂载之前');
        
    },
    mounted(){
        console.log('组件挂载之后');
        //获取DOM结构
        console.log(this.$refs.name);
        //模拟网络请求
        this.names=[{"title":"111","content":"222"},{"title":"111222","content":"222333"}]
    },
    beforeUpdate(){
        console.log('组件更新之前');
    },
    updated(){
        console.log('组件更新之后');
    },
    beforeUnmount(){
        console.log('组件销毁之前');
    },
    unmounted(){
        console.log('组件销毁之后');
    },
    data(){
        return{
            msg:"数据更新之前",
            names:[]
        }
    },
    methods:{
        updatemsg(){
            this.msg = "数据更新之后"
        }
    }
}

</script>